<template>
  <div class="dashboard-container">

    
        <!-- <el-table :data="tableData"
                    stripe
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
        > -->
        <div class="title-container" style="display: flex; justify-content: center; align-items: center;">
          <div class="title" style="font-size: 30px;">
              <svg-icon icon-class="exam" style="font-size: 50px; margin-right: 10px;" />
              考试中心
          </div>
      </div>
          <div class="wrapper" style="height:800px;">
            <ul class="top">
              <li style="font-size: 20px;">
                <svg-icon icon-class="examsearch" style="font-size: 35px; margin-right: 10px;" />
                试卷列表
              </li>
              <li class="search-li">
                <div class="icon">
                  <input type="text" placeholder="试卷名称" class="search" v-model="listQueryParam.examName"><i class="el-icon-search"></i>
                </div>
              </li>
              <li>
                <el-button type="primary"  @click="search" size="small" >
                  <svg-icon icon-class="search" style="font-size: 20px; margin-right: 5px; text-align: center;" />
                  搜索
                </el-button>
              </li>
            </ul>
            <ul class="paper" v-loading="loading">
              <li @click="toExamMsg(item)" class="item" v-for="(item, index) in listQueryParam.records" :key="index" :style="{ backgroundImage: item.examavatar ? `url(${item.examavatar})` : 'none' }">
                <div class="image-container">
                  <!-- 图片显示区域 -->
                </div>
                <div class="info-container">
                  <!-- 文字介绍区域 -->
                  <div style="font-size: 22px;">
                    <i class="iconfont icon-r-paper" style="font-size: 28px;"></i>
                    {{ item.examName }}
                  </div>
                  <p class="name">{{ item.examName }}-{{ item.remark }}</p>
                  <div class="info">
                    <span>考试截止时间：{{ item.endTime }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
            <!-- <el-table-column type="expand">
            <template slot-scope="props">
                <el-table
                :data="props.row.examDetailDTOS"
                style="width: 100%"
                >
                <el-table-column
                    prop="examName"
                    label="考试名称"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="questionName"
                    label="题目名称"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="我的分数"
                >
                </el-table-column>
                <el-table-column
                    prop="questionGrade"
                    label="问题分数"
                >
                </el-table-column>
                <el-table-column
                    prop="answer"
                    label="正确答案"
                >
                </el-table-column>
                </el-table>
            </template>
            </el-table-column>
             <el-table-column prop="id"
                            align="center"
                            label="编号"
            >
            </el-table-column> -->
            <!-- <el-table-column prop="name"
                            align="center"
                            label="学生姓名"
            >
            </el-table-column>
            <el-table-column prop="examName"
                            align="center"
                            label="考试名称"
            >
            </el-table-column>
            <el-table-column prop="examScore"
                            align="center"
                            label="考试成绩"
            >
            </el-table-column>
            <el-table-column prop="createTime"
                            align="center"
                            label="考试发布时间"
            >
            </el-table-column>
            <el-table-column prop="createTime"
                            align="center"
                            label="考试参加时间"
            >
            </el-table-column> -->
        <!-- </el-table> -->
        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="listQueryParam.current"
                    :limit.sync="listQueryParam.pageSize"
                    @pagination="getTableDataList"
        />
        
      

  </div>
</template>

<script>
import {
  getList,
  insert,
  update,
  get,
  del,
  getExamDate,
  getStudentDate,
  saveData,
  saveNewData
} from '@/api/ExamStudent/index'
import {getList as getExamavatar} from '@/api/Exam/index'
import Pagination from '@/components/Pagination'
import { tableUtil } from '@/mixins/table'
import { Message } from 'element-ui'
import uploadImg from '@/components/ImageUpload'
import ImgPreview from '@/components/ImgPreview'
import FileUpload from '@/components/FileUpload'

export default {
  mixins: [tableUtil],
  components: {
    FileUpload,
    Pagination, uploadImg, ImgPreview
  },
  data() {
    return {
      activeName: 'first',
      loading: false,
      type: localStorage.getItem('examType'),
      listQueryParam: {
        current: 1,
        pageSize: 5
      },
      listQueryParam1: {
        current: 1,
        pageSize: 500
      },
      excelUrl: '',
      dialogVisible: false,
      showExcel: false,
      formData: {},
      rules: {
        examId: [
          { required: true, message: '请选择所属考试', trigger: 'change' }
        ],
        studentId: [
          { required: true, message: '请选择所属学生', trigger: 'change' }
        ]
      },
      examIdOptions: [],
      studentIdOptions: [],
      currentStudent: {}
    }
  },
  mounted() {
    this.getTableDataList()
    this.loading = true
  },
  methods: {
    uploadExcel() {
      this.dialogVisible = true
    },
    saveExcel() {
      if (!this.excelUrl) {
        Message.error('请先上传文件')
        return
      }
      let param = {}
      param.url = this.excelUrl
      param.studentId = localStorage.getItem('examId')
      saveNewData(param).then((res) => {
        this.excelUrl = ''
        Message.success(res.data)
        this.dialogVisible = false
      })
    },
    getTableDataList() {
  // console.log("获取到的 examId:", this.listQueryParam); // 打印 examId
  if (this.type == 2) {
    this.listQueryParam.studentId = localStorage.getItem('examId');
  }
  this.loading = true;

  // 先执行 getList 获取原始 records 数据
  getList(this.listQueryParam).then((res) => {
    console.log("接口返回的数据:", res); // 打印接口返回的数据结构
    this.listQueryParam.records = res.data.records; // 获取原始 records 数据
    console.log("获取到的 records 数据:", this.listQueryParam.records);
    this.total = res.data.total;

    // 再执行 getExamavatar 获取 examavatar 和 remark 数据
    getExamavatar(this.listQueryParam1).then((res) => {
      console.log("获取到的 examavatar 数据:", res); // 打印 examavatar 数据结构
      const examavatarList = res.data.records;
      console.log("123456:",examavatarList);

      // 将 examavatar 和 remark 数据合并到 this.listQueryParam.records
      this.listQueryParam.records = this.listQueryParam.records.map(record => {
        // 找到对应的 examavatar 和 remark 数据
        const matchingExamavatar = examavatarList.find(item => item.id === record.examId);
        return {
          ...record, // 保留原始记录的其他字段
          examavatar: matchingExamavatar ? matchingExamavatar.examavatar : '', // 添加 examavatar 字段
          remark: matchingExamavatar ? matchingExamavatar.remark : '' // 添加 remark 字段
        };
      });

      console.log("更新后的 this.listQueryParam.records:", this.listQueryParam.records);
      this.loading = false;
    }).catch((error) => {
      console.error("获取 examavatar 数据失败:", error);
      this.loading = false;
    });
  }).catch((error) => {
    console.error("获取列表数据失败:", error);
    this.loading = false;
  });
},
    updateClick(row) {
      this.dialogTitle = '修改'
      get(row.id).then((res) => {
        this.formData = res.data
        this.addOrUpdateDialogVisible = true
      })
    },
    delByIds(ids) {
      del(ids).then((res) => {
        Message.success('删除成功')
        this.getTableDataList()
      })
    },
    toExamMsg(exam) {
      // if (exam.examDate > this.formatDateNow()) {
      //     this.$message({
      //         message: "考试时间未到",
      //         type: "error",
      //     });
      //     return;
      // }
      console.log("传递过去的数据：",exam)
      console.log("传递过去的id：",exam.examId)
      // 获取当前时间
      const now = new Date();

      // 将考试截止时间字符串转换为 Date 对象
      const endTime = new Date(exam.endTime);

      // 比较当前时间与考试截止时间
      if (now > endTime) {
        // 如果当前时间超过了考试截止时间，提示用户
        this.$message({
          message: "已超过考试作答时间",
          type: "error",
        });
      }else{
        this.$router.push({
            path: "/TakeExam/examMsg",
            query: { examId: exam.examId ,
                    Id:exam.id,
                    takeTime:exam.takeTime},
        });
      }
    },
    saveData() {
      if (this.formData.id) {
        update(this.formData).then((res) => {
          Message.success('修改成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      } else {
        insert(this.formData).then((res) => {
          Message.success('添加成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.pagination {
    padding: 20px 0px 30px 0px;

    .el-pagination {
        display: flex;
        justify-content: center;
    }
}

.paper {
    h4 {
        cursor: pointer;
    }
}

.paper .item a {
    color: #000;
}

.paper li {
  list-style-type: none; /* 确保每个 li 也没有项目符号 */
}

.wrapper .top .order {
    cursor: pointer;
}

.wrapper .top .order:hover {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
}

.item .info i {
    margin-right: 5px;
    color: #0195ff;
}

.item .info span {
    margin-right: 14px;
}

.paper .item {
    width: 380px;
    border-radius: 4px;
    padding: 20px 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
    transition: all 0.6s ease;
}

.item {
    cursor: pointer;
    height: 300px; /* 固定高度 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    padding: 20px; /* 根据需要调整内边距 */
    border-radius: 8px; /* 圆角边框 */
    margin-bottom: 10px; /* 元素之间的间距 */
    color: rgb(0, 255, 17); /* 文字颜色，根据背景图片调整 */
    text-align: center; /* 水平居中 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    font-weight: bold; /* 加粗所有文字*/
}

.image-container {
  width: 100%; /* 图片容器宽度 */
  height: 250px; /* 图片容器高度，根据需要调整 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  border-radius: 8px; /* 圆角边框 */
}

.info-container {
  width: 100%; /* 文字介绍容器宽度 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文字水平居中 */
  font-size: 14px; /* 文字大小 */
  color: red; /* 文字颜色 */
}

.dashboard-container .item .name {
  font-weight: bold; /* 加粗所有文字*/
  font-size: 14px;
  color: red !important; /* 使用 !important 确保样式优先级 */
}

.dashboard-container .item .info {
  font-weight: bold; /* 加粗所有文字*/
  font-size: 14px;
  color: red !important; /* 使用 !important 确保样式优先级 */
}

.paper .item:hover {
    box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
    transform: scale(1.03);
}

.paper .item .info {
    font-size: 14px;
    color: #88949b;
}

.paper .item .name {
    font-size: 14px;
    color: #88949b;
}

.paper * {
    margin: 20px 0;
}

.wrapper .paper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
}

.top .icon {
    position: relative;
}

.wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#myExam .search-li {
    margin-left: auto;
}

.top .search-li {
    margin-left: auto;
}

.top li {
    display: flex;
    align-items: center;
}

.top .search {
    margin-left: auto;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
}

.wrapper .top {
    display: flex;
}

.wrapper .top li {
    margin: 20px;
}

.dashboard-container {
    width: 950px ;
    margin: 0 auto;
}

.dashboard-container .title {
    margin: 20px;
}

.dashboard-container .wrapper {
    background-color: #fff;
}

</style>
